<template>
  <div>
    <!-- v-loading="loading" :show-close="false"  -->
    <el-dialog title=""
               class="login-dialog"
               :show-close="false"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="900px"
               :visible.sync="dialogFormVisible">
      <el-row>
        <el-col class="header-nav-left"
                :span="12">
          <img src="static/img/newLogo.png" />
          <!-- <div class="newLogo"></div> -->
        </el-col>
      </el-row>
      <el-row class="login-content">
        <el-col :span="12"
                style="padding: 10px">
          <div class="login-img-box login-box">
            <img src="static/img/login2.png" />
          </div>
        </el-col>
        <el-col :span="12"
                style="padding: 10px">
          <el-form :model="loginForm"
                   :rules="loginRules"
                   ref="loginForm"
                   class="login-box login-form"
                   label-width="120px">
            <el-form-item label="用户名"
                          prop="username">
              <el-input v-model="loginForm.username"
                        @keyup.enter.native="login"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码"
                          prop="password">
              <el-input :type="pwdType"
                        @keyup.enter.native="login"
                        v-model="loginForm.password"
                        autocomplete="off"></el-input>
              <span class="show-pwd"
                    @click="showPwd">
                <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 80%"
                         type="success"
                         class="login-bt"
                         @keyup.enter.native="login"
                         @click="login">登 录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  log,
} from '@/utils/message'
export default {
  name: "login",
  data () {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      dialogFormVisible: false,
      loginRules: {

      },
      loading: false,
      pwdType: "password",
    }
  },
  created: function () {
    // this.$router.push({ path: "/card/index" })
    // this.$router.push('/pcc')

  },
  methods: {
    show () {
      this.dialogFormVisible = true
    },
    showPwd () {
      if (this.pwdType === "password") {
        this.pwdType = ""
      } else {
        this.pwdType = "password"
      }
    },
    close () {
      this.dialogFormVisible = false
    },
    // 登陆
    login () {
      this.$refs['loginForm'].validate((valid) => {
        if (!valid) {
          log('error submit!!');
          return false;
        }

        // 通知外部开始加载mqtt
        this.loading = true
        this.$emit('login', this.loginForm)
      });
    },
    showPwd () {
      if (this.pwdType === "password") {
        this.pwdType = ""
      } else {
        this.pwdType = "password"
      }
    }
  },
}
</script>

<style scoped>
.login-bt {
  width: 100%;
}

.login-box >>> .el-form-item__label {
  font-size: 18px;
  color: #213767;
  font-weight: bold;
}

.header-nav-left img {
  height: 50px;
  margin-left: 20px;
}

.login-dialog >>> .el-dialog {
  /* background: linear-gradient(180deg, #F7FBFF 0%, #EBF0FF 100%); */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -1px 2px 0px #b0b9ce;
  background: url("/static/img/bg.png");
}

.login-dialog >>> .el-dialog__body {
  padding: 10px;
  height: 550px;
}

.login-dialog >>> .el-input {
  width: 85%;
}
.login-img-box img {
  width: 100%;
  margin-top: 30px;
  height: 240px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background-size: cover/contain;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-box >>> .el-form-item__error {
  font-size: 16px;
}

.login-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  height: 340px;
}

.show-pwd {
  font-size: 25px;
}
.login-form {
  padding-top: 80px;
}

.login-content {
  padding-top: 50px;
  padding-bottom: 50px;
}
</style>
